<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    1、冒泡排序
    <script>
        var arr = [10, 2, 5, 27, 98, 31];
        console.log('未排序数组：' + arr);
        for (var i = 1; i < arr.length; ++i) {
            for (var j = 0; j < arr.length - i; ++j) {
                if (arr[j] > arr[j + 1]) {
                    [arr[j], arr[j + 1]] = [arr[j + 1], arr[j]];
                }
            }
        }
        console.log('排序后数组：' + arr);
    </script>
    <br>
    2、插入排序
    <script>
        var arr = [89, 56, 100, 21, 87, 45, 1, 888];
        console.log('未排序：' + arr);
        for (var i = 1; i < arr.length; i++) {
            for (var j = i; j > 0; --j) {
                if (arr[j - 1] > arr[j]) {
                    [arr[j - 1], arr[j]] = [arr[j], arr[j - 1]];
                }
            }
        }
        console.log('排序后数组' + arr);
    </script>
    <br>
    3、省级城市三级联动<br>
    <div>
        省：<select class="province">
            <option>
                -请选择-
            </option>
        </select>
        市：<select class="city">
            <option>
                -请选择-
            </option>
        </select>
        区：<select class="area">
            <option>
                -请选择-
            </option>
        </select>
    </div>
    <script>
        var arr_city = [
            {
                "id": 10001,
                "name": "陕西省",
                "child": [
                    {
                        "id": 100011,
                        "name": "西安市",
                        "child": [
                            {
                                "id": 100011,
                                "name": "高新区"
                            },
                            {
                                "id": 100011,
                                "name": "未央区",
                            }
                        ]
                    },
                    {
                        "id": 100012,
                        "name": "宝鸡市",
                        "child": [
                            {
                                "id": 100012,
                                "name": "高新区"
                            },
                            {
                                "id": 100012,
                                "name": "成仓区"
                            }
                        ]
                    }
                ]
            },
            {
                "id": 10002,
                "name": "甘肃省",
                "child": [
                    {
                        "id": 100021,
                        "name": "兰州市",
                        "child": [
                            {
                                "id": 100021,
                                "name": "兰州区1"
                            },
                            {

                                "id": 100021,
                                "name": "兰州区2"
                            }
                        ]
                    },
                    {

                        "id": 100022,
                        "name": "酒泉市",
                        "child": [
                            {
                                "id": 100022,
                                "name": "酒泉区1"
                            },
                            {
                                "id": 100022,
                                "name": "酒泉区2"
                            }
                        ]
                    }
                ]
            },
            {
                "id": 10003,
                "name": "四川省",
                "child": [
                    {
                        "id": 100031,
                        "name": "成都市",
                        "child": [
                            {
                                "id": 100031,
                                "name": "锦江区"
                            },
                            {
                                "id": 100031,
                                "name": "青羊区"
                            }
                        ]
                    },
                    {
                        "id": 100032,
                        "name": "资阳市",
                        "child": [
                            {
                                "id": 100032,
                                "name": "雁江区"
                            },
                            {
                                "id": 100032,
                                "name": "开发区"
                            }
                        ]
                    }
                ]
            }
        ]
        var province = document.getElementsByClassName("province")[0];
        var city = document.getElementsByClassName("city")[0];
        var area = document.getElementsByClassName("area")[0];
        var nowprovinceIndex = 0;
        for (var i = 0; i < arr_city.length; i++) {
            var optEle = new Option(arr_city[1].name, i);
            console.log(optEle.innerHTML);
            province.appendChild(optEle)
        }
        province.onchange = function () {
            city.options.length = 1;
            area.options.length = 1;
            for (var i = 0; i < arr_city[this.value].child.length; i++) {
                var optEle = new Option(arr_city[this.value].child[i].name, i);
                city.appendChild(optEle)
            }
            nowprovinceIndex = this.value;
        };
        city.onchange = function () {
            area.options.length = 1;
            console.log(area);
            for (var i = 0; i < arr_city[nowprovinceIndex].child[this.value].child.length; i++) {
                var optEle = new Option(arr_city[nowprovinceIndex].child[this.value].child[i].name, i);
                area.appendChild(optEle)
            }
        }
    </script>
    <br>
    习题1
    <br>
    <script>
        var arr = [1, 2, 3, 4, 2, 5, 6, 2, 7, 2];
        var index = 0, newarr = [];
        for (var i in arr) {
            if (arr[i] !== 2) {
                newarr[index] = arr[i];
                ++index;
            }
        }
        document.write("原数组为："+arr+"<br>"+"新数组为："+newarr);
    </script>
    <br>
    习题2
    <script>
        var arr = ['a', 'b', 'd', 'd', 'c', 'd', 'd'];
        var search = 'd';
        var newarr = [], i = j = 0;
        while (i < arr.length) {
            var res = arr.indexOf(search, i);
            if (res !== -1) {
                newarr[j] = res;
                i = res + 1;
                ++j;
            }
        }
        console.log('arr中元素d出现的次数:' + newarr.length + '；对应的所有索引下标:' + newarr);
    </script>
    <br>
    随机数
    <script>
        var arr = [];
        for (var i = 0; i < 10; i++) {
            var num = Math.floor(Math.random() * 91 + 10);
            document.write('num=' + num);
            arr.unshift(num);
        }
        console.log(arr);
    </script>

</body>

</html>